<template>
  <div>
    <main>
      <!-- 搜索栏 -->
      <div class="search">
        <el-select v-model="valueCate" placeholder="习题分类">
          <el-option
            v-for="item in optionsCate"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="valueType" placeholder="习题类型">
          <el-option
            v-for="item in optionsType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-select v-model="valueIfYc" placeholder="是否预测">
          <el-option
            v-for="item in optionsIfYc"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-input
          placeholder="请输入题号"
          prefix-icon="el-icon-search"
          v-model="keywordsTh"
        >
        </el-input>
        <el-input
          placeholder="请输入标题"
          prefix-icon="el-icon-search"
          v-model="keywordsBt"
        >
        </el-input>
        <el-button
          type="primary"
          class="btn_search"
          icon="el-icon-search"
          @click="searchExeList"
          >搜索
        </el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="resetSearch"
          >重置
        </el-button>

        <el-button type="primary" id="pub_work" @click="pubWork"
          >布置作业
        </el-button>
      </div>

      <!-- 表格区域 -->
      <el-table
        v-if="!filterFlag"
        border
        stripe
        ref="multipleTable"
        :data="tableData"
        :row-key="getKey"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @select="handleSelect"
        @select-all="selectAllRow"
      >
        <el-table-column
          align="center"
          :reserve-selection="true"
          type="selection"
          width="40"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          :index="indexMethods"
          width="60"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="titleNumber"
          label="题号"
          width="80"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="title"
          label="标题"
          width="130"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="isJt"
          label="是否真题"
          width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.isJt == 0 ? "否" : "是" }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="content"
          label="题目"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="typeName"
          label="习题类型"
          width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="subjectType"
          label="习题分类"
          width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="scope.row.subjectType == 1">口语</div>
            <div v-else-if="scope.row.subjectType == 3">阅读</div>
            <div v-else-if="scope.row.subjectType == 4">写作</div>
            <div v-else>听力</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="isAnswer"
          label="是否有标准答案"
          width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.isAnswer == 0 ? "否" : "是" }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="isYc"
          label="是否预测"
          width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.isYc == "0" ? "否" : "是" }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="specialPubWork(scope.row.id)"
              >布置作业
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 过滤表格 -->
      <el-table
        v-if="filterFlag"
        border
        stripe
        ref="multipleTable"
        :data="filterTableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          align="center"
          type="selection"
          :reserve-selection="true"
          width="40"
        >
        </el-table-column>
        <el-table-column align="center" label="序号" type="index" width="60">
        </el-table-column>
        <el-table-column
          align="center"
          prop="titleNumber"
          label="题号"
          width="80"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="title"
          label="标题"
          width="130"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="isJt"
          label="是否真题"
          width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.isJt == 0 ? "否" : "是" }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="content"
          label="题目"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="typeName"
          label="习题类型"
          width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="subjectType"
          label="习题分类"
          width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="scope.row.subjectType == 1">口语</div>
            <div v-else-if="scope.row.subjectType == 3">阅读</div>
            <div v-else-if="scope.row.subjectType == 4">写作</div>
            <div v-else>听力</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="isAnswer"
          label="是否有标准答案"
          width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.isAnswer == 0 ? "否" : "是" }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="isYc"
          label="是否预测"
          width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.isYc == "0" ? "否" : "是" }}

            {{ scope.row.isYc }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="specialPubWork(scope.row.id)"
              >布置作业
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        large
        background
        :page-size="rows"
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'

export default {
  data () {
    return {
      optionsIfYc: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ],
      optionsCate: [{
        value: '1',
        label: '口语'
      },
      {
        value: '2',
        label: '听力'
      },
      {
        value: '3',
        label: '阅读'
      },
      {
        value: '4',
        label: '写作'
      },
      ],

      optionsType: [
        {
          value: '1',
          label: 'RA朗读句子'
        },
        {
          value: '2',
          label: 'RS重复句子'
        },
        {
          value: '3',
          label: 'DI描述图片'
        },
        {
          value: '4',
          label: 'RL描述讲座'
        },
        {
          value: '5',
          label: 'ASQ短问答'
        },
        {
          value: '14',
          label: 'FIBR阅读填空'
        },
        {
          value: '15',
          label: 'RP段落排序'
        },
        {
          value: '16',
          label: 'FIBRW段落填空'
        },
        {
          value: '17',
          label: 'MCS单项选择(阅读)'
        },
        {
          value: '18',
          label: 'MCM多项选择(阅读)'
        },
        {
          value: '19',
          label: 'SWT总结短文'
        },
        {
          value: '20',
          label: 'WE文章写作'
        },
        {
          value: '6',
          label: 'SST录音总结'
        },
        {
          value: '7',
          label: 'WFD听写句子'
        },
        {
          value: '8',
          label: 'FIB听力填空'
        },
        {
          value: '9',
          label: 'MCM多项选择(听力)'
        },
        {
          value: '10',
          label: 'MCS单项选择(听力)'
        },
        {
          value: '11',
          label: 'SMW选择缺少单词'
        },
        {
          value: '12',
          label: 'HCS多项选择摘要'
        },
        {
          value: '13',
          label: 'HIW识别错词'
        }

      ],
      valueCate: '', // 习题分类
      valueType: '', // 习题类型
      valueIfYc: '', // 是否预测 
      keywordsTh: '', // 题号搜索关键字
      keywordsBt: '', // 标题关键字搜索
      tableData: [],
      filterTableData: [],
      filterFlag: false,
      multipleSelection: [],
      // 分页数据
      lxTotal: 0,//已联系题数
      total: 0,//总题数
      page: 1,
      rows: 20,
      pages: 0, //总页数
      tmIdsStr: '', // 题目id字符串
      tmS: [],
      Ary: [],
      selectRowAry: [],  // 二维数组，保存每一页选中的行

    }
  },
  created () {
    this.getExerciseList(this.page)
  },

  updated () {

    // 切换页码时, 设置复选框的选中状态
    this.$nextTick(() => {
      this.tableData.forEach(el => {
        this.multipleSelection.forEach(item => {
          // 这里 toggleRowSelection 的第一个参数必须是 el，设置 item 无效
          if (el.id === item.id) this.$refs['multipleTable'].toggleRowSelection(el, true)
        })
      })
    })
  },

  methods: {
    getKey (row) {
      return row.id
    },

    // 全选按钮事件
    selectAllRow (selection) {
      /**
       * @param {Array} selection：当前页全选 / 取消全选后的结果
       */
      this.multipleSelection = selection
    },

    indexMethods (index) {
      return this.page > 1 ? (this.page - 1) * 20 + index + 1 : index + 1
    },
    // 重置搜索
    resetSearch () {
      if (this.keywordsTh != '' || this.keywordsBt != '' || this.valueCate !== '' || this.valueType !== '') {
        this.filterFlag = false
        this.keywordsTh = ''
        this.keywordsBt = ''
        this.valueCate = ''
        this.valueType = ''
        this.getExerciseList(this.page)
      }
    },
    // 关键字搜索题目
    searchExeList () {
      // 未选择搜索项
      if (this.keywordsTh == '' && this.keywordsBt == '' && this.valueCate == '' && this.valueType == '' && this.valueIfYc == '') {
        this.$msg.info('请输入一个搜索项')
      } else {
        sendPost(api.getSubjectList, {
          page: this.page,
          rows: 20,
          subjectType: this.valueCate,
          subjectTypeId: this.valueType,
          titleNumber: this.keywordsTh,
          title: this.keywordsBt,
          isYc: this.valueIfYc
        }).then(res => {
          console.log(res);
          this.tableData = res.data.list
          this.total = res.data.total
        })
      }
    },
    // 针对性布置作业
    specialPubWork (id) {
      sessionStorage.setItem('tmIds', id)
      this.$router.push('Exercises/pubWork')
    },
    // 布置作业
    pubWork () {
      if (!this.multipleSelection.length) {
        this.$msg.info('请先挑选题目!')
      } else {
        // alert('去布置作业');
        this.$router.push('Exercises/pubWork')
        // 暂存
        sessionStorage.setItem('tmIds', this.tmIdsStr)
      }
    },
    // 获取习题列表
    getExerciseList (page) {
      sendPost(api.getSubjectList, {
        page: page,
        rows: 20,
        subjectType: this.valueCate,
        subjectTypeId: this.valueType,
        titleNumber: this.keywordsTh,
        title: this.keywordsBt
      }).then(res => {
        console.log(res);
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    // 取消复选框选择状态
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelect (val) {
      // console.log(val);
      // this.selectRowAry[this.page] = selection
    },


    handleSelectionChange (val) {
      console.log(val)
      // val 为选中项
      var that = this
      this.multipleSelection = val
      const tmIds = []

      val.forEach(item => {
        tmIds.push(item.id)
        this.tmS = tmIds.join() // 选中的题目
        this.Ary.push(item.id)
        this.Ary = [...new Set(this.Ary)]
      })

      this.tmIdsStr = tmIds.join()

    },
    // 当前页码发生改变时触发
    handleCurrentChange (value) {
      this.page = value
      this.getExerciseList(this.page)
    },
  }
}
</script>

<style lang="less" scoped>
main {
  width: 75rem;
  margin: 0 auto;

  /deep/ .el-button--primary {
    background-color: #ff5342;
    border-color: #ff5342;
  }

  .search {
    margin-top: 30px;
    height: 4rem;
    line-height: 4rem;
    background-color: #fff;

    .btn_search {
      margin-left: 1.25rem;
    }

    .el-select {
      width: 8rem;
      margin-right: 1.8rem;
    }

    .el-input {
      width: 14.3rem;
      margin-right: 1.4rem;
      border-radius: 50% !important;
    }

    .el-button {
      margin-right: 1rem;
      height: 2.5rem;
      border: none;
    }

    #pub_work {
      margin-left: 3rem;
      margin-right: 0;
    }

    /deep/ .el-button--mini,
    .el-button--mini.is-round {
      padding: 7px 15px;
    }
  }

  // 分页器
  .el-pagination {
    text-align: center;
    margin-top: 6.25rem;
  }
}
</style>
